<template>
  <el-tree
          ref="treeRef"
          :data="treeData"
          :props="defaultProps"
          default-expand-all
          style="height: 100%"
          node-key="id"
          @node-click="handleTreeClick"
  />
</template>

<script setup>
import { ref } from "vue";
import request from "@/util/request";

/**
 * 初始化树节点数据
 */
const treeData = ref([]);

/**
 * 树节点的属性
 */
const defaultProps = {
  label: 'label',
  children: 'children',
}

/**
 * 初始化树节点数据
 */
const initTreeList = async () => {
  const res = await request.get("mechanism/treeList");
  treeData.value = res.data.treeList;
}
initTreeList();

/**
 * 向父组件抛方法
 */
const emits = defineEmits(["id"])

/**
 * 节点数根据id获取获取对应的员工
 */
const handleTreeClick = (node) => {
  console.log(node.id);
  emits("id",node.id);
}
</script>

<style lang="scss" scoped>
.card {
  border: none;
  border-radius: 0;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}
</style>